# 动效开发 2：聊一聊 3D
我们在前一小节的案例中制作了一个立方体，其实就已经接触到了 3D。
所有东西一跟 3D 扯上关系，复杂指数都是噌噌噌往上走。不过也正常，毕竟多了一个维度，要有三维应有的尊严。
3D Transforms 要怎么写？能写翻牌效果吗？能写翻书效果吗？能写出立体书的效果吗？往下看，答案都在这里面。
很多时候，仅仅将元素进行二维层面的变换显然不是人类的终点，毕竟十二维空间都可能不是极限（视频: 从一维空间到十二维空间）。
Intro to 3D Transforms 的作者 David DeSandro 说，现在可是 21 世纪，可我们竟然还在跟三十年前的二维空间界面扯皮。所幸 2011 年，我们有了 CSS3，我们还有了 3D Transforms，真是一个值得奔走相告的大事件。
3D 变换相较 2D 变换，坐标系中多了 Z 轴，也就意味着物体除了上下左右，还可以前后移动。而 rotate 在 2D 中的旋转方式，在 3D 中与 rotateZ 相当。
那么，单纯地将 transform 中的参数扩展出 Z 维度，就能实现 3D 效果了吗？我看见 CSS3 笑了。
# perspective 概念理解
什么是 perspective ？词典中翻译为观点、远景、透视图。这是一个非常抽象的概念，需要一点空间想象力。
我们先抛开这个概念，尝试使用刚才说到的知识点进行翻牌（咦）效果的尝试，聪明的你一定分分钟码出来：
<div class="card">
<!-- 卡牌正面 -->
<figure class="card-front">1</figure>
<!-- 卡牌反面 -->
<figure class="card-back">2</figure>
</div>
.card-front {
background: red;
}
.card-back {
background: blue;
transform: rotateY( 180deg );
}
/* 翻牌动作 */
.card.flipped {
transform: rotateY( 180deg );
}
但是放浏览器里一看，这不对呀，为什么用 3D 的代码写出了 2D 的效果？
这个时候有请我们的 perspective 透视君。
学过素描的人一定对透视的概念不陌生，透视是保证素描写生真实合理的基础。
视频：透视学之一点透视法
CSS3 中的 perspective 在这样一个体系里就代表着元素与观者之间的距离，形象点说，就是元素 3D 效果的强度。CSS3 中的 3D 效果消失点固定，变化的是观者与元素之间的距离。不过 perspective 数值与 3D 效果强度是成反比的，数值越大，元素的 3D 效果越不明显 —— 2000px 的视点意味着你看的是远方的物体，而 100px 则意味着这个物体就在你眼前。
这里有幅图或许能帮助我们想象 3D 效果强度这个概念。
